<script setup>
	import { ref } from 'vue'
	import { profileApi, taskApi } from '@/apis/user.js'
	import { onLoad } from '@dcloudio/uni-app'

	// 1. 用户信息
	const userProfile = ref({})
	// 用户信息接口
	async function getUserProfile() {
		const { code, data } = await profileApi()
		// 检测接口否调用成功
		if (code === 200) {
			// 渲染请求来的数据
			console.log('用户：', data)
			userProfile.value = data
		}
	}

	// 2. 任务数据
	const taskInfo = ref({})
	// 任务数据
	async function getTaskInfo() {
		try {
			const { code, data } = await taskApi('2023', '07')
			// 检测接口否调用成功
			if (code === 200) {
				// 渲染请求来的数据
				console.log('任务：', data)
				taskInfo.value = data
			}
		} catch (err) {
			console.log(err)
		}
	}
	onLoad(() => {
		getUserProfile()
		getTaskInfo()
	})
</script>

<template>
	<view class="page-container">
		<view class="user-profile">
			<image class="avatar" :src="userProfile.avatar" mode=""></image>
			<text class="username">{{ userProfile.name }}</text>
			<text class="no">司机编号：{{ userProfile.phone }}</text>
			<text class="mobile">手机号码：{{ userProfile.number }}</text>
		</view>
		<view class="month-overview">
			<view class="title">本月任务</view>
			<view class="content">
				<view class="item">
					<text class="volumn">{{ taskInfo.taskAmounts }}</text>
					<text class="label">任务总量</text>
				</view>
				<view class="item">
					<text class="volumn">{{ taskInfo.completedAmounts }}</text>
					<text class="label">完成任务量</text>
				</view>
				<view class="item">
					<text class="volumn">{{ taskInfo.transportMileage }}</text>
					<text class="label">运输里程(km)</text>
				</view>
			</view>
		</view>
		<view class="entry-list">
			<uni-list :border="false">
				<uni-list-item to="/subpkg_user/truck/index" showArrow title="车辆信息" />
				<uni-list-item to="/subpkg_user/task/index" showArrow title="任务数据" />
				<uni-list-item to="/subpkg_user/settings/index" showArrow title="系统设置" />
			</uni-list>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>